<script setup>
import { computed, ref } from 'vue';
import { useCountdown } from '@/util/countdown.js';
const { remaining, veryCodeBtnTxt, countdown } = useCountdown();

const sending = ref(false);
const veryCodeSending = ref(false);
const getVeryCodeAble = computed(() => veryCodeSending.value || 0 < remaining.value);
const formState = ref({ tel: '', veryCode: '' });

const rules = {
  tel: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'change',
    }
  ],
  veryCode: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'change'
    }
  ]
};

async function getCode() {}

async function onSubmit() {}
</script>

<template>
  <a-form
    :model="formState"
    :rules="rules">
    <a-form-item name="tel">
      <a-input
        size="large"
        v-model:value="formState.tel"
        type="tel"
        placeholder="请输入手机号"
        :disabled="sending"
        autocomplete="off">
      </a-input>
    </a-form-item>
    <a-form-item name="veryCode">
      <a-row>
        <a-col :xxl="16" :xs="14">
          <a-input
            size="large"
            v-model:value="formState.veryCode"
            placeholder="请输入验证码"
            :disabled="sending"
            autocomplete="off" />
        </a-col>
        <a-col :xxl="7" :xs="9" :offset="1">
          <a-button
            type="primary"
            size="large"
            block
            :disabled="getVeryCodeAble"
            @click="getCode">
            {{ veryCodeBtnTxt }}
          </a-button>
        </a-col>
      </a-row>
    </a-form-item>
    <a-button
      type="primary"
      size="large"
      block
      html-type="submit"
      @click="onSubmit"
      :disabled="sending">
      登录
    </a-button>
  </a-form>
</template>

